<template>
	<view class="pageBg">
		<view class="userHeader flex_r_sb_c">
			<view class="userHeaderleft flex_r_fs_c">
				<image class="avatar margin_r24" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="info flex_c_c_fs">
					<text class="f_36 fw_500 tc_w margin_b24">{{userInfo.name}}</text>
					<text class="f_28 fw_500 tc_a text_line_2">{{userInfo.saying}}</text>
				</view>
			</view>
			<view class="userHeaderRight h100 flex_c_c_c" @click.stop="editUserInfo">
				<text class="iconfont iconedit f_28 tc_a"></text>
			</view>
		</view>
		<view class="reading">
			<view class="readingBg w100 h100" :style="{backgroundImage:'url(' + readingBg + ')'}"></view>
			<view class="readingContainer w100 h100">
				<view class="readingTitle f_32 fw_500 tc_w margin_b12">每日一"毒"</view>
				<view class="readingCnt flex_c_c_fs">
					<text class="f_24 fw_500 tc_w">{{reading}}</text>
				</view>
			</view>
		</view>
		<view class="moduleBox">
			<view class="moduleHeader">
				<text class="f_40 fw_600 tc_w">我的功能</text>
			</view>
			<view class="moduleCnt flex_r_sb_c">
				<view class="moduleCntLeft flex_r_sa_c">
					<view class="flex_c_c_c">
						<text class="iconfont iconfingerprint f_58 fw_400 margin_b32 iconColor_04"></text>
						<text class="f_28 fw_400 tc_w">点点</text>
					</view>
					<view class="flex_c_c_c">
						<text class="iconfont iconfingerprint f_58 fw_400 margin_b32 iconColor_03"></text>
						<text class="f_28 fw_400 tc_w">看看</text>
					</view>
					<view class="flex_c_c_c">
						<text class="iconfont iconfingerprint f_58 fw_400 margin_b32 iconColor_02"></text>
						<text class="f_28 fw_400 tc_w">有啥</text>
					</view>
				</view>
				<view class="moduleCntRight flex_r_c_c" @click.stop="$tool.go('/pages/user/dataCache/dataCache')">
					<view class="flex_c_c_c">
						<text class="iconfont iconcache f_58 fw_400 margin_b32 iconColor_01"></text>
						<text class="f_28 fw_400 tc_w">数据缓存</text>
					</view>
				</view>
			</view>
		</view>
		<fr-custom-pop :show.sync="popVisible" :options="popOptions" class="popBox" @popConfirm="popConfirm">
			<!-- #ifdef MP-WEIXIN -->
			<view class="cnt flex_c_fs_fs" slot="slotCnt">
				<view class="w100 flex_r_c_c">
					<view class="avatarItem margin_b16">
						<image class="popImg" :src="editInfo.avatar" mode="aspectFill"></image>
						<text class="iconfont iconrefresh f_32 tc_d" @click.stop="changeAvatar"></text>
					</view>
				</view>
				<view class="inputItem w100 margin_b16">
					<uni-easyinput type="text" v-model="editInfo.name" :clearable="false" :inputBorder="false" :styles="{color:'#DDD'}" :placeholderStyle="'color:#BBB'" placeholder="请输入您的昵称" @blur="nameOnBlur"></uni-easyinput>
				</view>
				<view class="inputItem w100 margin_b16">
					<uni-easyinput type="text" v-model="editInfo.saying" :clearable="false" :inputBorder="false" :styles="{color:'#DDD'}" :placeholderStyle="'color:#BBB'" placeholder="请输入您的说说" @blur="nameOnBlur"></uni-easyinput>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="options">
				<view class="cnt flex_c_fs_fs" slot="slotCnt">
					<view class="w100 flex_r_c_c">
						<view class="avatarItem margin_b16">
							<image class="popImg" :src="editInfo.avatar" mode="aspectFill"></image>
							<text class="iconfont iconrefresh f_32 tc_d" @click.stop="changeAvatar"></text>
						</view>
					</view>
					<view class="inputItem w100 margin_b16">
						<uni-easyinput type="text" v-model="editInfo.name" :clearable="false" :inputBorder="false" :styles="{color:'#DDD'}" :placeholderStyle="'color:#BBB'" placeholder="请输入您的昵称" @blur="nameOnBlur"></uni-easyinput>
					</view>
					<view class="inputItem w100 margin_b16">
						<uni-easyinput type="text" v-model="editInfo.saying" :clearable="false" :inputBorder="false" :styles="{color:'#DDD'}" :placeholderStyle="'color:#BBB'" placeholder="请输入您的说说" @blur="nameOnBlur"></uni-easyinput>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</fr-custom-pop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popVisible: false,
				popOptions: {
					showTitle: true,
					title: '个人信息',
					popW: 600,
				},
				userInfo: {},
				editInfo: {},
				readingBg: '',
				reading: '',
				refresh: false,
			};
		},
		onLoad() {
			if(uni.getStorageSync('moon|userInfo')) {
				this.userInfo = uni.getStorageSync('moon|userInfo').data
			} else {
				this.userInfo = {
					name: '月光匣',
					avatar: 'https://cdn.pixabay.com/photo/2020/02/24/06/33/crescent-4875339_960_720.jpg',
					saying: '或者, 需要的只是一个人静静发呆......'
				}
			}
			this.getReading()
			this.getReadingBg()
		},
		methods: {
			getReading() {
				const _this = this
				_this.$api.get({
					url: 'https://api.muxiaoguo.cn/api/dujitang',
					loadingTip: _this.refresh ? '获取数据中...' : '',
					data: {
						api_key: 'a5d378396806df8f',
					},
					success: res => {
						_this.reading = res.data.comment
					},
					fail: err => {}
				})
			},
			getReadingBg() {
				const _this = this
				_this.$api.get({
					url: 'https://api.muxiaoguo.cn/api/ACG',
					loadingTip: _this.refresh ? '获取数据中...' : '',
					data: {
						api_key: '75903b6b11736abc',
						type: 'json',
						size: 'mw1024',
					},
					success: res => {
						_this.readingBg = res.data.imgurl
					},
					fail: err => {}
				})
			},
			editUserInfo() {
				this.editInfo = JSON.parse(JSON.stringify(this.userInfo))
				this.popVisible = true
			},
			changeAvatar() {
				const _this = this
				const url = 'https://api.muxiaoguo.cn/api/sjtx'
				_this.$api.get({
					url: url,
					loadingTip: _this.refresh ? '获取数据中...' : '',
					data: {
						api_key: '1b4558c7e52ab59f',
						method: 'mobile', // 输出壁纸端mobile(手机端) pc(电脑端)
					},
					success: res => {
						_this.editInfo.avatar = res.data.imgurl
					},
					fail: err => {}
				})
			},
			popConfirm() {
				this.userInfo = this.editInfo
				let data = {
					date: this.$tool.getDate('date'),
					data: this.editInfo
				}
				uni.setStorageSync('moon|userInfo', data)
				this.$tool.msg('保存成功!', 'success')
				this.popVisible = false
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #253b55;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	padding: 0 28rpx;
	box-sizing: border-box;
	.userHeader {
		width: 100%;
		height: 200rpx;
		padding-bottom: 16rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgba(204,204,204,0.3);
		margin-bottom: 24rpx;
		.userHeaderleft {
			height: 100%;
			.avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
			.info {
				width: 460rpx;
			}
		}
	}
	.reading {
		width: 100%;
		height: 180rpx;
		border-radius: 24rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 48rpx;
		.readingBg {
			background-size: cover;
			background-position: center center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.readingBg::before {
		    content: "";
		    position: absolute;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    top: 0;
		    background-color: rgba(0, 0, 0, 0.3);
		    // z-index: 2;
		}
		.readingContainer {
			padding: 20rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			.readingCnt {
				width: 100%;
				height: 90rpx;
			}
		}
	}
	.moduleBox {
		width: 100%;
		.moduleHeader {
			margin-bottom: 40rpx;
		}
		.moduleCnt {
			box-sizing: border-box;
			.moduleCntLeft {
				flex: 3;
				border-right: 2rpx solid rgba(204,204,204,0.3);
			}
			.moduleCntRight {
				flex: 1;
			}
		}
	}
	.popBox {
		.cnt {
			padding: 28rpx;
			box-sizing: border-box;
			.popImg {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
		}
	}
}
.iconColor_01 {
	color: #F09069;
}
.iconColor_02 {
	color: #C381F7;
}
.iconColor_03 {
	color: #5FA3F8;
}
.iconColor_04 {
	color: #65DBC5;
}
</style>
